<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div class="app-container">
        <div id="main" style="width:50%; height: 300px;float: left"></div>
        <div id="goods" style="width:50%; height: 300px;float:right;"></div>
    </div>
</template>


<script>
    import request from "../utils/request";
    export default {
        data(){
            return{

                option:{
                    title: {
                        text: "月销量一览",
                        padding: [0,0,0,30]  // 位置
                    },
                    tooltip: {
                        show:true
                    },
                    xAxis: {
                        data: ["1月", "2月", "3月", "4月", "5月", "6月","7月","8月","9月","10月","11月","12月"],
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "销量",
                            type: "bar",
                            data:[],
                        },
                    ],
                },

                option2:{
                    title: {
                        text: "主题销售一览图",
                        padding: [0,0,0,30]  // 位置
                    },
                    tooltip: {
                        show:true
                    },
                    color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data:[]         // 数据数组，name 为数据项名称，value 为数据项值
                        }
                    ]
                }

            }
        }
        ,
        created(){
           this.handleQuerySaleCountByMonth();
            this.handleQuerySaleCountByMonth2();
        },
        methods:{
            init(){
                // 基于准备好的dom，初始化echarts实例
                this.myChart = this.$echarts.init(document.getElementById('main'));
                this.themeOpt = this.$echarts.init(document.getElementById("goods"));
                // 根据this.option的数据绘制图表
                this.myChart.setOption(this.option,true);
                this.themeOpt.setOption(this.option2,true);
            },
            handleQuerySaleCountByMonth() {
                request.get("/api/sale/querySaleCountByMonth").then(resp => {
                    if (resp.status == 'M0200') {
                      this.option.series[0].data = resp.data;
                    }
                })
            },
            handleQuerySaleCountByMonth2(){
                request.get("/api/sale/querySaleByTheme").then(resp => {
                    if (resp.status == 'M0200') {
                        this.option2.series[0].data = resp.data;
                    }
                })
            }

        },
        mounted () {
            //执行渲染chart程序
            this.init()
        },

        watch: {
            //观察option的变化
            option: {
                handler(newVal, oldVal) {
                    if (this.myChart) {
                        if (newVal) {
                            this.myChart.setOption(newVal);
                        } else {
                            this.myChart.setOption(oldVal);
                        }
                    } else {
                        this.init();
                    }
                },
                deep: true //对象内部属性的监听，关键。
            },
            option2: {
                handler(newVal, oldVal) {
                    if (this.themeOpt) {
                        if (newVal) {
                            this.themeOpt.setOption(newVal);
                        } else {
                            this.themeOpt.setOption(oldVal);
                        }
                    } else {
                        this.init();
                    }
                },
                deep: true //对象内部属性的监听，关键。
            },
        }
    }
</script>
